<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:150px;
            height:150px;
            background-color: darkred;

            /*animation*/
           /* animation:long 2s ease 2s forwards ;*/

            /*steps() 设置步长，就是几次执行完动画*/
            animation:long 2s steps(10) 2s forwards ;
        }
        @keyframes long {
            0%{
                width:150px;

            }
            100%{
                width:600px;
            }
        }

</style>
</head>
<body>
<div class="box"></div>
</body>
</html>